<template>
  <a-layout-sider :theme="sideTheme" :class="['side-menu', 'beauty-scroll', isMobile ? null : 'shadow']" width="230px" :collapsible="collapsible" v-model="collapsed" :trigger="null" style="overflow-x: hidden;">
    <div :class="['logo', theme]">
      <router-link to="/home">
        <img src="@/assets/img/logo.png">
        <h1>{{systemName}}</h1>
      </router-link>
    </div>
    <i-menu
    
    :openKeys="openKeys"
    @openChange="onOpenChange"
    :theme="theme"
    :collapsed="collapsed"
    :options="menuData"
    @select="onSelect"
    class="menu"/>
  </a-layout-sider>
</template>

<script>
import IMenu from './menu'
import {mapState} from 'vuex'
export default {
  name: 'SideMenu',
  data(){
    return{
      openKeys: ['/JZG','/addJZG','/editJZG','/workChange','/system'],
    }
  },
  components: {IMenu},
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menuData: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    }
  },
  computed: {
    sideTheme() {
      return this.theme == 'light' ? this.theme : 'dark'
    },
    ...mapState('setting', ['isMobile', 'systemName'])
  },
  methods: {
    onOpenChange(openKeys) {  // 当菜单被展开时触发此处
      /* 
      经测试传入的变量openKeys是数组 点击已经展开的菜单时传入的是空数组
      点击未展开的菜单时传入的是[当前展开菜单的key,点击的菜单key]
      下面的if判断用openKeys === [] 无效 所以我只能判断数组length是否等于0
      */
      // if (openKeys.length !== 0) {  
      
      //   if(openKeys.length>1){
      //     this.openKeys = [openKeys[1]]
      //   }else{
      //     this.openKeys = [openKeys[0]]
      //   }
     
      // } else {
      //   this.openKeys = ['']
      // }
    },
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    }
  }
}
</script>

<style lang="less" scoped>
@import "index";
</style>
